<template>
  <div class="main">
    <vxe-grid
      class="device-list"
      ref="table"
      border="none"
      resizable
      stripe
      :height="'800px'"
      :cell-class-name="cellClassName"
      :row-class-name="tableRowClassName"
      :loading="loading"
      keep-sourece
      :seq-config="{
        startIndex: (tablePage.currentPage - 1) * tablePage.pageSize,
      }"
      :columns="_tableColumn"
      :data="tableData"
    >
      <!--自定义插槽-->
      <template #checkbox_header>
        <vxe-checkbox
          v-model="checkAll"
          @change="checkAllDevice"
          :indeterminate="indeterminate"
        ></vxe-checkbox>
      </template>

      <template #checkbox_default="{ row }">
        <vxe-checkbox
          v-model="row.checked"
          @change="checkDevice(row, $event)"
        ></vxe-checkbox>
      </template>

      <template #seq_default="{ row }">
        <span
          style="
            background: #1573ff;
            cursor: pointer;
            color: #fff;
            border-radius: 2px;
            padding: 0 2px;
            font-size: 10px;
          "
          v-if="row.isEdit"
          @click="addRow(row.index)"
          >提交</span
        >
        <span v-else>{{ row.index + 1 }}</span>
      </template>

      <template #type_header>
        <el-select
          v-model="nodeClass"
          @change="onChangeType"
          size="mini"
          placeholder="全部分类"
        >
          <el-option label="全部分类" value="全部分类" />
          <el-option
            v-for="(item, index) in types"
            :key="index"
            :label="item.className"
            :value="item.className"
          />
        </el-select>
      </template>

      <template #type_default="{ row }">
        <el-select
          v-if="row.isEdit"
          v-model="row.nodeClass"
          size="mini"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in types"
            :key="index"
            :label="item.className"
            :value="item.className"
          />
        </el-select>
        <span v-else>{{ row.nodeClass }}</span>
      </template>

      <template #brand_header>
        <el-select
          v-model="brand"
          @change="onChangeBrand"
          size="mini"
          placeholder="品牌"
        >
          <el-option label="品牌" value="品牌" />
          <el-option
            v-for="(item, index) in brands"
            :key="index"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
      </template>
      <template #brand_default="{ row }">
        <el-select
          v-model="row.brand"
          size="mini"
          placeholder="请选择"
          v-if="row.isEdit"
        >
          <el-option
            v-for="(item, index) in brands"
            :key="index"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
        <span v-else>{{ row.brand }}</span>
      </template>

      <template #model_default="{ row }">
        <span class="pointer" @dblclick="openNewPup(row.ip, row.name)">{{
          row.model == 0 ? "" : row.model
        }}</span>
      </template>

      <template #name_default="{ row }">
        <vxe-input
          v-if="row.isEdit"
          v-model="row.name"
          placeholder=""
          size="mini"
        ></vxe-input>
        <span v-else>{{ row.name }}</span>
      </template>

      <template #ip_default="{ row }">
        <vxe-input
          v-if="row.isEdit"
          v-model="row.ip"
          placeholder=""
          size="mini"
          >{{ row.ip }}</vxe-input
        >
        <span v-else>{{ row.ip }}</span>
      </template>

      <template #port_default="{ row }">
        <span class="pointer" @click="openPortInfoPup(row.ip, row.model)">
          {{ row.port }}
          <span style="display: none">{{ row.id }}</span>
        </span>
      </template>

      <template #monitoring_default="{ row }">
        <span class="pointer" @click="openMonitoringItemsPup(row)">
          {{ row.monitoring }}
        </span>
      </template>

      <template #state_default="{ row }">
        <svg-icon
          class="status"
          v-if="row.state == 'up'"
          icon-class="status1"
        />
        <svg-icon
          class="status"
          v-if="row.state == 'down'"
          icon-class="status2"
        />
      </template>

      <template #config_default="{ row }">
        <span class="config pointer" @click="openSetPup(row.ip)">
          <svg-icon icon-class="shezhi2" />
        </span>
      </template>

      <template #custom_header>
        <span class="pointer" @click="openNewFieldPup">
          自定义字段
          <svg-icon class="add-btn" icon-class="add3"></svg-icon>
        </span>
      </template>

      <!-- 分页 -->
      <template v-slot:pager>
        <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :current-page.sync="tablePage.currentPage"
          :page-size.sync="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="onPageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>

    <!-- 新建字段弹窗 -->
    <div class="new-field-pup" v-if="isShowNewFieldPup">
      <div class="head">
        <div class="lf">新建字段</div>
        <div class="rt" @click="closeNewFieldPup">X</div>
      </div>
      <div class="body">
        <div class="row">
          字段名称：
          <el-input size="mini"></el-input>
        </div>
        <div class="btn-wrap">
          <button class="cancel-btn" @click="closeNewFieldPup">取消</button>
          <button class="confirm-btn" @click="addColumn">确定</button>
        </div>
      </div>
    </div>
    <!-- 配置弹窗 -->
    <div class="set-pup" v-if="isShowSetPup">
      <div class="head">
        <div class="lf">
          <div class="title">配置文件</div>
          <div class="btn pointer" @click="downCfg">下载</div>
          <div class="btn pointer" @click="openContrastPup">对比</div>
          <vxe-input
            class="search"
            placeholder=""
            suffix-icon="vxe-icon--search"
          ></vxe-input>
        </div>
        <div class="rt" @click="closeSetPup">X</div>
      </div>
      <div class="body">
        <vxe-table
          class="set-device-list"
          ref="cfgTable"
          stripe
          show-overflow
          max-height="650"
          border="none"
          header-row-class-name="vux-table-header"
          :data="cfgListData"
          :cell-class-name="setPupCellClassName"
        >
          <vxe-table-column type="checkbox" width="40" />
          <vxe-table-column type="seq" title="序号" width="50" />
          <vxe-table-column field="ip" title="IP" min-width="30" />
          <vxe-table-column field="hostName" title="主机名" min-width="50" />
          <vxe-table-column field="ds" title="时间" min-width="50">
            <template slot-scope="{ row }">
              <a
                href="javascript:;"
                @click="openConfigurationPup(row.ip, row.ds)"
                >{{ row.ds }}</a
              >
            </template>
          </vxe-table-column>
          <vxe-table-column field="success" title="获取结果" width="80">
            <template slot-scope="{ row }">
              <span v-if="row.success == 'true'">
                <svg-icon icon-class="check"></svg-icon>
              </span>
              <span v-if="row.success == 'false'">
                <svg-icon icon-class="cha"></svg-icon>
              </span>
            </template>
          </vxe-table-column>
        </vxe-table>
        <!-- 分页 -->
        <!-- <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :current-page.sync="tablePage.currentPage"
          :page-size.sync="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="onPageChange"
        >
        </vxe-pager> -->
      </div>
    </div>
    <!-- 资产信息-团体字信息-设备登录消息 -->
    <div class="new-pup-wrap" v-if="isShowNewPup">
      <div class="head">
        <div class="lf">编辑</div>
        <div class="rt" @click.stop="closeNewPup">X</div>
      </div>
      <div class="body">
        <div class="tabs">
          <div
            class="item"
            :class="{ active: current == 1 }"
            @click="newTabClick(1)"
          >
            资产信息
          </div>
          <div
            class="item"
            :class="{ active: current == 2 }"
            @click="newTabClick(2)"
          >
            团体字信息
          </div>
          <div
            class="item"
            :class="{ active: current == 3 }"
            @click="newTabClick(3)"
          >
            设备登录信息
          </div>
        </div>
        <!-- 资产信息 -->
        <div class="tabs-cont" v-if="current == 1">
          <div class="row">
            <div class="lf">全部分类：</div>
            <div class="rt">
              <el-select
                v-model="preDefinedProperty.nodeClass"
                placeholder="选择分类"
              >
                <el-option
                  v-for="item in types"
                  :key="item.className"
                  :label="item.className"
                  :value="item.className"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- <div class="row">
                    <div class="lf">品牌：</div>
                    <div class="rt">
                      <el-select v-model="brandValue" placeholder="选择品牌">
                        <el-option
                          v-for="item in brandOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">型号：</div>
                    <div class="rt">
                      <el-input v-model="modelValue" placeholder=""></el-input>
                    </div>
                  </div> -->
          <div class="row">
            <div class="lf">名称：</div>
            <div class="rt">
              <el-input
                v-model="preDefinedProperty.name"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">IP地址：</div>
            <div class="rt">
              <el-input
                v-model="preDefinedProperty.ip"
                placeholder=""
                readonly
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">机房：</div>
            <div class="rt">
              <el-input
                v-model="preDefinedProperty.room"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">所在机柜：</div>
            <div class="rt">
              <el-input
                v-model="preDefinedProperty.cabinet"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <!-- <div class="row">
                    <div class="lf">方向：</div>
                    <div class="rt">
                      <el-select
                        v-model="directionValue"
                        placeholder="选择方向"
                      >
                        <el-option
                          v-for="item in directionOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">U位：</div>
                    <div class="rt">
                      <el-input v-model="uValue" placeholder=""></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">端口数量：</div>
                    <div class="rt">
                      <a href="javascript:;" style="color: #1573ff">添加</a>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">监控项：</div>
                    <div class="rt">
                      <a href="javascript:;" style="color: #a93aaa">添加</a>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">状态：</div>
                    <div class="rt">
                      <span>
                        <svg-icon
                          icon-class="status1"
                          style="height: 10px"
                        ></svg-icon>
                      </span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">配置文件：</div>
                    <div class="rt">
                      <span>
                        <svg-icon icon-class="shezhi2"></svg-icon>
                      </span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">描述：</div>
                    <div class="rt">
                      <el-input v-model="desValue" placeholder=""></el-input>
                    </div>
                  </div> -->
          <div class="row">
            <div class="lf">序列号：</div>
            <div class="rt">
              <el-input
                v-model="preDefinedProperty.serialNumber"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <!-- <div class="row">
                    <div class="lf">系统OID：</div>
                    <div class="rt">
                      <el-input v-model="OIDValue" placeholder=""></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">自定义字段：</div>
                    <div class="rt">
                      <el-select
                        v-model="directionValue"
                        placeholder="自定义字段选择"
                      >
                        <el-option
                          v-for="item in directionOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <span class="add-btn">
                        <svg-icon icon-class="add3"></svg-icon>
                      </span>
                    </div>
                  </div> -->

          <el-input v-model="preDefinedProperty.id" type="hidden"></el-input>
          <div class="btn-wrap">
            <button class="cancel-btn" @click.stop="closeNewPup">取消</button>
            <button class="confirm-btn" @click.stop="addDeviceConfirm(1)">
              确定
            </button>
          </div>
        </div>
        <!-- 团体字信息 -->
        <div class="tabs-cont" v-if="current == 2">
          <div class="row">
            <div class="lf">读团体字：</div>
            <div class="rt">
              <el-input
                placeholder=""
                v-model="snmpCommunity.readCommunity"
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">写团体字：</div>
            <div class="rt">
              <el-input
                placeholder=""
                v-model="snmpCommunity.writeCommunity"
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">SNMP版本：</div>
            <div class="rt">
              <el-input placeholder="" value="v2c"></el-input>
            </div>
          </div>
          <div class="btn-wrap">
            <button class="cancel-btn" @click.stop="closeNewPup">取消</button>
            <button
              class="confirm-btn"
              @click.stop="addDeviceConfirm(2)"
              :disabled="preDefinedProperty.ip.length <= 0"
            >
              确定
            </button>
          </div>
        </div>
        <!-- 设备登录信息 -->
        <div class="tabs-cont" v-if="current == 3">
          <div class="row">
            <div class="lf">用户名：</div>
            <div class="rt">
              <el-input
                placeholder=""
                v-model="deviceLoginInfo.userName"
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">密码：</div>
            <div class="rt">
              <el-input
                placeholder=""
                show-password
                v-model="deviceLoginInfo.passwd"
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">Super密码：</div>
            <div class="rt">
              <el-input
                placeholder=""
                show-password
                v-model="deviceLoginInfo.superPasswd"
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">登录方式：</div>
            <div class="rt">
              <el-select
                v-model="deviceLoginInfo.mode"
                placeholder="登录方式"
                @change="loginMethod"
              >
                <el-option label="ssh" value="ssh"> </el-option>
                <el-option label="telnet" value="telnet"> </el-option>
              </el-select>
            </div>
          </div>
          <div class="row">
            <div class="lf">设备厂商：</div>
            <div class="rt">
              <el-select
                v-model="deviceLoginInfo.factory"
                placeholder="设备厂商"
              >
                <el-option label="华为" value="华为" />
                <el-option label="华三" value="华三" />
                <el-option label="迪普" value="迪普" />
                <el-option label="中兴" value="中兴" />
                <el-option label="锐捷" value="锐捷" />
                <el-option label="其他" value="其他" />
              </el-select>
            </div>
          </div>
          <div class="row">
            <div class="lf">设备型号：</div>
            <div class="rt">
              <el-input
                placeholder=""
                v-model="deviceLoginInfo.type"
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="lf">登录端口：</div>
            <div class="rt">
              <el-input
                placeholder=""
                v-model="deviceLoginInfo.port"
                readonly
              ></el-input>
            </div>
          </div>
          <div class="btn-wrap">
            <button class="cancel-btn" @click.stop="closeNewPup">取消</button>
            <button
              class="confirm-btn"
              @click.stop="addDeviceConfirm(3)"
              :disabled="preDefinedProperty.ip.length <= 0"
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 端口信息弹窗 -->
    <div class="port-info-pup" v-if="isShowPortInfoPup">
      <div class="head">
        <div class="lf">{{ title }} 端口信息</div>
        <div class="rt">
          <!-- <div class="btn">
            <span>+</span>
            新建端口
          </div>
          <div class="btn">
            <span>⚙</span>
            删除
          </div> -->
          <div class="close-btn" @click="closePortInfoPup">X</div>
        </div>
      </div>
      <div class="body">
        <vxe-table
          class="port-info"
          ref="portInfoTable"
          stripe
          show-overflow
          max-height="500"
          border="none"
          header-row-class-name="vux-table-header"
          :data="portInfoData"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
        >
          <vxe-table-column field="checked" type="checkbox" width="40" />
          <vxe-table-column type="seq" title="序号" width="90" />
          <vxe-table-column field="name" title="端口号" />
          <vxe-table-column field="status" title="端口状态">
            <template slot-scope="{ row }">
              <svg-icon
                class="status"
                v-if="row.status == true"
                icon-class="status1"
              />
              <svg-icon
                class="status"
                v-if="row.status == false"
                icon-class="status2"
              />
            </template>
          </vxe-table-column>
          <vxe-table-column field="statu" title="端口操作">
            <template slot-scope="{ row }">
              <vxe-switch
                @change="switchChange(row, $event)"
                v-model="row.statu"
                size="mini"
              ></vxe-switch>
            </template>
          </vxe-table-column>
          <vxe-table-column field="description" title="端口描述" />
        </vxe-table>
      </div>
      <div class="foot">
        <div class="cancel-btn" @click="closePortInfoPup">取消</div>
        <div class="view-btn" @click="checkTraffic()">查看流量</div>
      </div>
    </div>
    <!-- 配置弹窗 -->
    <div class="configuration-pup" v-if="isShowConfigurationPup">
      <div class="close-btn" @click="closeConfigurationPup">
        <svg-icon icon-class="close"></svg-icon>
      </div>
      <div class="head">{{ cfgData.hostName }} 配置</div>
      <div class="body" id="configuration">
        <codemirror
          class="code"
          v-model="cfgData.cfg"
          :options="cmOptions"
        ></codemirror>
      </div>
    </div>

    <!-- 代码版本，差异对比 对话框内容 -->
    <div class="contrast-pup" v-if="isShowContrastPup">
      <div class="close-btn" @click="closeContrastPup">
        <svg-icon icon-class="close"></svg-icon>
      </div>
      <div class="head">对比</div>
      <div ref="contrast" class="body"></div>
    </div>

    <!-- 监控项 -->
    <div class="port-info-pup" v-if="isShowMonitoringItemsPup">
      <div class="head">
        <div class="lf">监控项</div>
        <div class="rt">
          <div class="btn" @click="addMonitoringItems">
            <span>+</span>
            新增
          </div>
          <div class="btn" @click="delMonitoringItems">
            <span>⚙</span>
            删除
          </div>
          <div class="close-btn" @click="closeMonitoringItemsPup">X</div>
        </div>
      </div>
      <div class="body">
        <vxe-table
          class="port-info"
          ref="monitoringItemsTable"
          stripe
          show-overflow
          max-height="500"
          border="none"
          header-row-class-name="vux-table-header"
          :data="monitoringItemsData"
          :row-class-name="monitoringItemsTableRowClassName"
        >
          <vxe-table-column field="checked" type="" width="60">
            <template #default="{ row }">
              <vxe-checkbox
                v-model="row.checked"
                :disabled="row.mark == 'default'"
                @change="selectChangeEventA(row, $event)"
              ></vxe-checkbox>
            </template>
          </vxe-table-column>
          <vxe-table-column type="seq" title="序号" width="50" />
          <vxe-table-column field="propertyName" title="属性名" width="120">
            <template #default="{ row }">
              <vxe-input
                :disabled="!row.isEditA"
                v-model="row.propertyName"
                placeholder=""
                size="mini"
              ></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="value"
            title="属性值"
            width="300"
          ></vxe-table-column>
          <vxe-table-column field="oid" title="oid">
            <template #default="{ row }">
              <vxe-input
                :disabled="!row.isEditA"
                v-model="row.oid"
                placeholder=""
                size="mini"
              ></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="time" title="时间" />
        </vxe-table>
      </div>
      <div class="foot">
        <!-- <div class="cancel-btn" @click="isShowMonitoringItemsPup">取消</div> -->
        <div class="view-btn" @click="submitMonitoringItemsPup">确定</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { saveAs } from "file-saver";
import {
  getInterface,
  getSnmp,
  putInterfaceaction,
  getCfgip,
  getCfg,
  getCfgcompare,
  getNode,
  getPasswd,
  putNodeUpdate,
  putpropertyoidInsert,
  putpropertyoidDelete,
} from "@/api/manage";
import { putNodeInsert, putInsertSnmp, putPasswdInsert } from "@/api/find";

// 代码对比插件
import { codemirror } from "vue-codemirror";
import Codemirror from "codemirror";
// 核心样式
import "codemirror/lib/codemirror.css";
// 引入主题后还需要在 options 中指定主题才会生效
import "codemirror/theme/rubyblue.css";
import "codemirror/mode/python/python.js";
import "codemirror/addon/merge/merge.js";
import "codemirror/addon/merge/merge.css";
import DiffMatchPatch from "diff-match-patch";
(window as any).diff_match_patch = DiffMatchPatch;
(window as any).DIFF_DELETE = -1;
(window as any).DIFF_INSERT = 1;
(window as any).DIFF_EQUAL = 0;

@Component({
  components: {
    Codemirror,
    codemirror,
  },
})
export default class DeviceList extends Vue {
  [x: string]: any;
  // 接收父组件参数
  @Prop({
    type: Array,
    required: true,
  })
  types!: any;

  @Prop({
    type: Array,
    required: true,
  })
  brands!: any;

  @Prop({
    type: Array,
    required: true,
  })
  list!: any;

  @Prop({
    type: Array,
    required: true,
  })
  tableColumn!: any;
  @Prop({
    type: Boolean,
    required: true,
  })
  _loading!: any;

  public _tableColumn: Array<any> = [];

  public title: string = "";
  $router: any;
  public tableData: Array<any> = [];
  public _tableData: Array<any> = [];

  public selectedData: Array<any> = []; //设备选中
  public indeterminate: Boolean = false;
  public checkAll: Boolean = false;

  public isShowMonitoringItemsPup: Boolean = false; //监控项弹窗
  public selectedDataA: Array<any> = []; //设备选中

  public data: Array<any> = [];
  public portInfoData: Array<any> = []; //存放后台返回的端口信息
  public portInfoIp: string = ""; //端口信息ip
  public port: Array<any> = []; //端口信息
  public preDefinedProperty: Array<any> = []; //型号弹窗资产信息数据
  public snmpCommunity: Array<any> = []; //型号弹窗团体字数据
  public deviceLoginInfo: Array<any> = []; //设备登录信息
  public nodeClass: string = "";
  public brand: string = "";

  public isShowNewFieldPup: boolean = false;
  public isShowSetPup: boolean = false;
  public isShowNewPup: boolean = false;
  public isShowPortInfoPup: boolean = false;
  public current: number = 1; //tab切换
  public isShowConfigurationPup: boolean = false;
  public isShowContrastPup: boolean = false;

  public cfgListData: Array<any> = [];
  public cfgData: string = "";
  public cmOptions: Object = {
    tabSize: 4, // tab的空格个数
    theme: "dracula", //主题样式
    lineNumbers: true, //是否显示行数
    lineWrapping: true, //是否自动换行
    styleActiveLine: true, //line选择是是否加亮
    matchBrackets: true, //括号匹配
    mode: "vue", //实现javascript代码高亮
    readOnly: true, //只读
  };

  //分页
  public tablePage: Object = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  };

  // 新增监控项数据
  public newMonitoringItemsData: Array<any> = [];

  //加载动画-懒加载
  public loading: boolean = false;

  public created() {
    this.loading = this._loading;
    this.findList();
  }

  public findList() {
    this.loading = true;
    this._tableColumn = this.tableColumn;
    this._tableColumn = this._tableColumn.filter(
      (items: { checked: any }) => items.checked === true
    );
    this.loading = false;
    this.tableData = this.list;
    this.tablePage.total = this.list.length;
    this.onPageChange({ ...this.tablePage });
    console.log("子组件tableData****", this.tableData);
  }

  //监控项弹窗
  public monitoringItemsTableRowClassName({ row, rowIndex }) {
    //把每一行的索引放进row
    row.index = rowIndex;
  }
  public openMonitoringItemsPup(e: any) {
    console.log(e);
    e.oidProperty.map((item: any) => {
      item.checked = false;
      item.isEditA = false;
    });
    this.monitoringItemsData = e.oidProperty;
    this.isShowMonitoringItemsPup = true;
  }

  public closeMonitoringItemsPup() {
    this.isShowMonitoringItemsPup = false;
    this.monitoringItemsData = [];
  }

  public addMonitoringItems() {
    console.log("添加");
    let obj = {
      checked: false,
      isEditA: true,
      oid: "",
      propertyName: "",
    };
    // console.log(obj);

    this.monitoringItemsData.push(obj);
    this.newMonitoringItemsData.push(obj);
  }

  public delMonitoringItems() {
    if (this.selectedDataA.length <= 0) {
      this.$message({
        showClose: true,
        message: "至少选择一项！",
        type: "error",
      });
    } else {
      console.log("删除", this.selectedDataA);
      this.$confirm("此操作将删除所选设备, 是否继续?", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除操作
          this.monitoringItemsData = this.monitoringItemsData.filter(
            (items: { checked: any }) => items.checked === false
          );

          putpropertyoidDelete(this.selectedDataA).then((res) => {
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "删除成功！",
                type: "success",
              });
              this.selectedDataA = [];
              this.isShowMonitoringItemsPup = false;
              this.$parent.getNodeview(); //调用父组件-获取nodeview方法
            } else {
              this.$message({
                showClose: true,
                message: "删除失败",
                type: "error",
              });
            }
          });

          this.$forceUpdate();
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "error",
            message: "删除失败",
          });
        });
    }
  }
  // 监控项提交
  public submitMonitoringItemsPup() {
    if (this.newMonitoringItemsData.length > 0) {
      console.log("提交", this.newMonitoringItemsData);
      this.newMonitoringItemsData.map((item) => {
        if (
          item.oid.trim().length <= 0 ||
          item.propertyName.trim().length <= 0
        ) {
          this.$message({
            showClose: true,
            message: "内容不能为空！",
            type: "error",
          });
          return;
        }
      });
      putpropertyoidInsert(this.newMonitoringItemsData).then((res) => {
        console.log(res.data);

        if (res.data.result == "success") {
          this.$message({
            showClose: true,
            message: "操作成功！",
            type: "success",
          });
          this.isShowMonitoringItemsPup = false;
          this.$parent.getNodeview(); //调用父组件-获取nodeview方法
        } else {
          this.$message({
            showClose: true,
            message: "操作失败！",
            type: "error",
          });
        }
      });
    } else {
      this.$message({
        showClose: true,
        message: "至少新增一项！",
        type: "error",
      });
    }
  }
  //监控项单选
  public selectChangeEventA(item: any, $event: any) {
    console.log("监控项单选");
    item.checked = $event.checked;
    console.log(item, $event);

    this.selectedDataA = this.monitoringItemsData.filter(
      (items: { checked: any }) => items.checked === true
    );
    console.log("监控项单选", this.monitoringItemsData);
    this.$forceUpdate();
  }

  //新建确定提交 1:资产信息 2:团体字信息 3:设备登录信息
  public addDeviceConfirm(e: any) {
    //    // 资产信息
    // public ipValue: string = ""; //新建ip
    // public categoriesValue: string = ""; //全部分类
    // public nameValue: string = ""; //名称
    // public machineRoomValue: string = ""; //机房
    // public cabinetValue: string = ""; //所在机柜
    // public serialNumValue: string = ""; //序列号
    // //团体字信息
    // public readcommunity: string = ""; //读团体字
    // public writecommunity: string = ""; //写团体字
    // //设备登录信息
    // public userName: string = ""; //用户名
    // public passwd: string = ""; //密码
    // public superPasswd: string = ""; //super密码
    // public mode: string = ""; //登录方式
    // public type: string = ""; //设备型号
    // public factory: string = ""; //设备厂商
    // public port: string = ""; //登录端口

    // 资产信息请求数据 nodeList
    let nodeList = [
      {
        cabinet: this.preDefinedProperty.cabinet,
        ip: this.preDefinedProperty.ip,
        id: this.preDefinedProperty.id,
        name: this.preDefinedProperty.name,
        nodeClass: this.preDefinedProperty.nodeClass,
        room: this.preDefinedProperty.room,
        serialNumber: this.preDefinedProperty.serialNumber,
        userDefinedPropertyList: [
          {
            nodeIp: this.preDefinedProperty.ip,
            nodeName: this.preDefinedProperty.name,
            propertyName: "默认值",
            propertyValue: "default",
          },
        ],
      },
    ];
    //团体字信息请求数据 snmpCommunityList
    let snmpCommunityList = [
      {
        id: this.preDefinedProperty.id,
        ip: this.preDefinedProperty.ip,
        readCommunity: this.snmpCommunity.readCommunity,
        writeCommunity: this.snmpCommunity.writeCommunity,
      },
    ];
    //设备登录信息请求参数 PasswdList
    let PasswdList = {
      factory: this.deviceLoginInfo.factory,
      ip: this.preDefinedProperty.ip,
      id: this.preDefinedProperty.id,
      mode: this.deviceLoginInfo.mode,
      passwd: this.deviceLoginInfo.passwd,
      port: this.deviceLoginInfo.port,
      superPasswd: this.deviceLoginInfo.superPasswd,
      type: this.deviceLoginInfo.type,
      userName: this.deviceLoginInfo.userName,
    };

    if (!this.isValidIP(this.preDefinedProperty.ip)) {
      this.$message({
        showClose: true,
        message: "请输入正确的ip!",
        type: "error",
      });
    } else {
      if (e == 1) {
        console.log("资产信息");
        if (this.preDefinedProperty.name.trim().length <= 0) {
          this.$message({
            showClose: true,
            message: "名称不能为空！",
            type: "error",
          });
        } else {
          putNodeUpdate(nodeList).then((res) => {
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "操作成功！",
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: "操作失败！",
                type: "error",
              });
            }
          });
        }
      } else if (e == 2) {
        console.log(
          "团体字信息",
          this.snmpCommunity.readCommunity,
          this.snmpCommunity.writeCommunity
        );
        if (this.snmpCommunity.readCommunity.trim().length <= 0) {
          this.$message({
            showClose: true,
            message: "读团体字不能为空！",
            type: "error",
          });
        } else if (this.snmpCommunity.writeCommunity.trim().length <= 0) {
          this.$message({
            showClose: true,
            message: "写团体字不能为空！",
            type: "error",
          });
        } else {
          putInsertSnmp(snmpCommunityList).then((res) => {
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "操作成功！",
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: "操作失败！",
                type: "error",
              });
            }
          });
        }
      } else if (e == 3) {
        console.log("设备登录信息", PasswdList);
        if (
          this.deviceLoginInfo.factory.trim().length <= 0 ||
          this.deviceLoginInfo.mode.trim().length <= 0 ||
          this.deviceLoginInfo.passwd.trim().length <= 0 ||
          this.deviceLoginInfo.port.trim().length <= 0 ||
          this.deviceLoginInfo.superPasswd.trim().length <= 0 ||
          this.deviceLoginInfo.type.trim().length <= 0 ||
          this.deviceLoginInfo.userName.trim().length <= 0
        ) {
          this.$message({
            showClose: true,
            message: "请完善信息!",
            type: "error",
          });
        } else {
          putPasswdInsert(PasswdList).then((res) => {
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "操作成功！",
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: "操作失败！",
                type: "error",
              });
            }
          });
        }
      }
    }
  }

  // 克隆-新增一条数据
  public addRow(index: any) {
    // console.log(index);
    // console.log(this.tableData[index]);

    let nodeList = [
      {
        ip: this.tableData[index].ip,
        name: this.tableData[index].name,
        nodeClass: this.tableData[index].nodeClass,
        hostName: this.tableData[index].hostName,
        state: this.tableData[index].state,
        userDefinedPropertyList: [
          {
            nodeIp: this.tableData[index].ip,
            nodeName: this.tableData[index].name,
            propertyName: "默认值",
            propertyValue: "default",
          },
        ],
      },
    ];
    console.log("nodeList", nodeList);

    putNodeInsert(nodeList).then((res) => {
      if (res.data.result == "success") {
        this.$message({
          showClose: true,
          message: "资产信息新建成功！",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "资产信息新建失败！",
          type: "error",
        });
      }
    });
  }

  //ip地址判断
  public isValidIP(ip: any) {
    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    return reg.test(ip);
  }

  // 登录方式下拉框
  public loginMethod(e: any) {
    console.log(e);
    if (e == "ssh") {
      this.deviceLoginInfo.port = "22";
    } else if (e == "telnet") {
      this.deviceLoginInfo.port = "23";
    }
  }

  //分页
  public onPageChange({ currentPage, pageSize }) {
    this.tablePage.currentPage = currentPage;
    this.tablePage.pageSize = pageSize;
    this._tableData = this.splitArr(this.list, this.tablePage.pageSize);
    this.tableData = this._tableData[currentPage - 1];
    // this.findList();
  }
  public splitArr(arr: any, size: any) {
    let index = 0;
    let res = [];
    while (index < arr.length) {
      res.push(arr.slice(index, index + size));
      index += size;
    }
    return res;
  }

  public tableRowClassName({ row, rowIndex }) {
    //把每一行的索引放进row
    row.index = rowIndex;
  }

  // 设备全选
  public checkAllDevice(val: any) {
    this.indeterminate = false;
    console.log("全选", this.tableData);
    if (val.checked) {
      // 全选中

      this.tableData.map((item) => {
        item.checked = true;
      });
      this.selectedData = this.tableData;
    } else {
      console.log(2, val.checked);
      this.tableData.map((item) => {
        item.checked = false;
      });
      this.selectedData = [];
    }

    console.log(this.tableData);
  }
  // 设备单选
  public checkDevice(item: any, $event: any) {
    item.checked = $event.checked;
    console.log(item, $event);

    // console.log("###", this.list);

    this.selectedData = this.list.filter(
      (items: { checked: any }) => items.checked === true
    );
    console.log("selectedData", this.selectedData);
    console.log("子组件list", this.list);
    sessionStorage.setItem("findResultData", JSON.stringify(this.list));
    if (this.selectedData.length == this.tableData.length) {
      this.checkAll = true;
    } else {
      this.checkAll = false;
    }
    if (this.selectedData.length <= 0) {
      this.indeterminate = false;
    } else {
      this.indeterminate = true;
    }
  }

  // 导出数据
  // public exportSelectEvent() {
  //   console.log("导出数据", this.selectedData);
  //   this.$refs.table.exportData({
  //     type: "csv",
  //     data: this.selectedData,
  //   });
  // }

  // 导入数据
  // public importDataEvent() {
    // this.$refs.table.importData({
    //   mode: "",
    //   remote: true,
    //   beforeImportMethod() {
    //     console.log("开始导入");
    //   },
    //   importMethod({ file }) {
    //     console.log("importMethod", file);
    //     // 处理表单
    //     const formData = new FormData();
    //     formData.append("file", file);
    //     console.log("formData", formData);
    //   },
    //   afterImportMethod() {
    //     console.log("导入之后");
    //   },
    // });
  // }
  

  // 端口开关操作
  public switchChange(item: any, $event: { value: any }) {
    console.log($event);
    console.log($event.value);

    let action = "";
    if ($event.value) {
      action = "on";
    } else {
      action = "off";
    }
    console.log("item", item, this.portInfoIp, action, this.writeCommunity);
    putInterfaceaction({
      action: action,
      interfacename: item.name,
      ip: this.portInfoIp,
      writecommunity: this.writeCommunity,
    }).then((res: any) => {
      console.log("开关", res.data, res.data.status);
      if (res.data.status == "unknown") {
        this.$message({
          showClose: true,
          message: "端口操作失败！",
          type: "error",
        });
      } else {
        this.$message({
          showClose: true,
          message: "端口操作成功！",
          type: "success",
        });
        this.openPortInfoPup(this.portInfoIp, this.title);
      }
    });
  }

  // 查看流量跳转
  public checkTraffic() {
    let selectRecords = this.$refs.portInfoTable.getCheckboxRecords();
    // console.log('selectRecords',selectRecords);
    for (let i = 0; i < selectRecords.length; i++) {
      console.log("查看流量跳转", selectRecords[i].name);
      this.port.push(selectRecords[i].name);
    }

    if (this.port.length == 0) {
      this.$message({
        showClose: true,
        message: "至少选择一个端口号",
        type: "error",
      });
    } else {
      this.$router.push({
        path: "../views/manage/diagram",
        name: "diagram",
        //params传参 需要使用 name 否则取不到；对应路由配置的 name
        params: {
          ip: this.portInfoIp,
          name: this.title,
          port: JSON.stringify(this.port),
        },
      });
    }
  }

  public selectAllEvent({ checked, records }) {
    console.log(checked ? "所有勾选事件" : "所有取消事件", records);
  }

  public selectChangeEvent({ checked, records }) {
    console.log(checked ? "勾选事件" : "取消事件", records);
  }

  // 新建字段
  public addColumn() {
    console.log("新建字段");
  }

  //对比弹窗
  public openContrastPup() {
    const $table = this.$refs.cfgTable;
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length == 2) {
      console.log(selectRecords);
      let ip = selectRecords[0].ip;
      let date2 = selectRecords[0].ds;
      let date1 = selectRecords[1].ds;

      // 比对设备配置文件
      getCfgcompare({ ip: ip, date1: date1, date2: date2 }).then((res) => {
        // console.log("比对设备配置文件", res.data);
        let configFile1 = res.data.configFile1.cfg;
        let configFile2 = res.data.configFile2.cfg;
        if (res.data) {
          this.isShowContrastPup = true;
          this.$nextTick(() => {
            // 文件对比初始化
            const contrast = this.$refs.contrast;
            Codemirror.MergeView(contrast, {
              value: configFile1, //上次内容
              origLeft: null,
              orig: configFile2, //本次内容
              lineNumbers: true, //显示行号
              mode: "text/html",
              highlightDifferences: true,
              connect: "align",
              readOnly: true, //只读 不可修改
              lineWrapping: true,
            });
          });
        }
      });
    } else {
      this.$message({
        showClose: true,
        message: "请选择两项进行对比！",
        type: "error",
      });
    }
  }
  public closeContrastPup() {
    this.isShowContrastPup = false;
  }
  //下载配置文件
  public downCfg() {
    const $table = this.$refs.cfgTable;
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length <= 0) {
      this.$message({
        showClose: true,
        message: "至少选择一项下载！",
        type: "error",
      });
    } else {
      // console.log(selectRecords);
      for (let i = 0; i < selectRecords.length; i++) {
        // 查询设备配置文件
        getCfg({ ip: selectRecords[i].ip, date: selectRecords[i].ds }).then(
          (res) => {
            // console.log("查询设备配置文件", res.data[0]);

            let str = new Blob([res.data[0].cfg], {
              type: "text/plain;charset=utf-8",
            });
            saveAs(str, selectRecords[i].ds + `.txt`);
          }
        );
      }
    }
  }
  //配置信息弹窗
  public openConfigurationPup(ip: any, date: any) {
    // 查询设备配置文件
    getCfg({ ip: ip, date: date }).then((res) => {
      console.log("查询设备配置文件", res.data[0]);
      this.cfgData = res.data[0];
    });
    this.isShowConfigurationPup = true;
  }
  public closeConfigurationPup() {
    this.isShowConfigurationPup = false;
  }
  //端口信息弹窗
  public async openPortInfoPup(ip: string, name: string) {
    await getSnmp({ ip: ip }).then((res: any) => {
      console.log("团体字信息", res.data);
      for (let i = 0; i < res.data.length; i++) {
        this.writeCommunity = res.data[i].writeCommunity;
      }
    });
    console.log("2", this.writeCommunity);
    await getInterface({ ip: ip }).then((res: any) => {
      this.portInfoData = [];
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].status == "UP") {
          res.data[i].status = true;
          res.data[i].statu = true;
        } else if (res.data[i].status == "DOWN") {
          res.data[i].status = false;
          res.data[i].statu = false;
        }
      }

      this.portInfoData = res.data;
      this.portInfoIp = ip;
      this.title = name;
      this.isShowPortInfoPup = true;
    });
  }
  public closePortInfoPup() {
    this.isShowPortInfoPup = false;
  }
  // 型号弹窗
  public openNewPup(ip: any, name: string) {
    this.getNode(ip, name);
    this.getSnmp(ip);
    this.getPasswd(ip);

    this.isShowNewPup = true;
  }
  public closeNewPup() {
    this.isShowNewPup = false;
    this.current = 1;
  }
  // 型号弹窗tab切换
  public newTabClick(index: number) {
    this.current = index;
  }

  // 获取设备列表
  public getNode(ip: any, name: string) {
    getNode({ ip: ip, name: name }).then((res: any) => {
      console.log("获取设备列表", res.data[0]);
      this.preDefinedProperty = res.data[0];
    });
  }
  // 获取团体字信息
  public getSnmp(ip: any) {
    getSnmp({ ip: ip }).then((res: any) => {
      console.log("团体字信息", res.data);
      if (res.data.length > 0) {
        this.snmpCommunity = res.data[0];
      }
      console.log(this.snmpCommunity);
    });
  }
  //获取单个设备密码
  public getPasswd(ip: any) {
    getPasswd({ ip: ip }).then((res: any) => {
      console.log("获取单个设备密码", res.data);
      if (res.data.length > 0) {
        this.deviceLoginInfo = res.data[0];
      }
      console.log("*", this.deviceLoginInfo);
    });
  }

  // 配置文件
  public openSetPup(ip: any) {
    console.log("配置文件", ip);
    //查询设备配置信息列表
    getCfgip({ ip: ip }).then((res: any) => {
      console.log("配置信息", res.data);
      this.cfgListData = res.data;
      this.isShowSetPup = true;
    });
  }

  public closeSetPup() {
    this.isShowSetPup = false;
  }

  public openNewFieldPup() {
    this.isShowNewFieldPup = true;
  }

  public closeNewFieldPup() {
    this.isShowNewFieldPup = false;
  }

  public onChangeType(value: string) {
    // console.log(value);
    if (value === "全部分类") {
      this.tableData = this.list;
      return;
    }
    this.tableData = this.list.filter(
      (items: { nodeClass: any }) => items.nodeClass === value
    );
  }

  public onChangeBrand(value: string) {
    // console.log(value);
    if (value === "品牌") {
      this.tableData = this.list;
      return;
    }
    this.tableData = this.list.filter(
      (items: { brand: any }) => items.brand === value
    );
  }

  public cellClassName({ row, rowIndex, column, columnIndex }) {
    if (column.property === "model") {
      return "col-1";
    } else if (column.property === "port") {
      return "col-2";
    } else if (column.property === "monitoring") {
      return "col-3";
    }
  }
  public setPupCellClassName({ row, rowIndex, column, columnIndex }) {
    if (column.property === "name") {
      return "col-1";
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
/deep/.CodeMirror-merge-r-deleted, /deep/.CodeMirror-merge-l-deleted, /deep/.CodeMirror-merge-r-inserted, /deep/.CodeMirror-merge-l-inserted
  background-image url()
/deep/.vxe-pager
  text-align center
/deep/.vxe-input--inner[disabled]
  border none
  background none
  color #606266
.device-list /deep/.vxe-input--inner[disabled]
  border none
  background none
  color #606266
.device-list /deep/.el-input__inner
  background none
/deep/.el-input.is-disabled .el-input__inner, /deep/.el-input .el-input__inner
  color #606266
/deep/.vxe-body--column .is-disabled .el-input__suffix
  display none
/deep/.el-input__inner::-webkit-input-placeholder
  color #000
  font-weight 700
/deep/.el-input__inner::-moz-input-placeholder
  color #000
  font-weight 700
/deep/.el-input__inner::-ms-input-placeholder
  color #000
  font-weight 700
// 表格高度
/deep/.vxe-body--row .vxe-body--column, /deep/.vxe-table--render-default .vxe-header--column:not(.col--ellipsis)
  height 34px
  padding 0
/deep/.vxe-table--render-default .vxe-body--row.row--stripe
  background #f0f2f4
.vxe-header--column .vxe-resizable
  display none
.device-list
  padding 0 20px
  /deep/.el-input__inner
    border none
    padding-left 0
  /deep/.vxe-table--header
    border-collapse collapse
  /deep/.vux-table-header
    background #fff
    font-size 13px
    color #000
    font-weight 700
    border 0
    // border-bottom 2px solid #69aeff
    /deep/.vxe-header--column
      padding 0
      text-align center
    /deep/.vxe-cell--edit-icon
      display none
    /deep/.el-input .el-input__inner
      border 0
      font-size 13px
      color #000
      font-weight 700
    input::placeholder
      font-size 13px
      color #000
      font-weight 700
    .el-select .el-input .el-select__caret
      font-size 13px
      color #000
      font-weight 700
    .add-btn
      cursor pointer
  /deep/.vxe-table--body
    /deep/.vxe-body--row
      font-size 13px
      color #000
    /deep/.row--stripe
      background-color #f0f2f4
      border-radius 4px
      border 1px solid #ebebeb
    /deep/.vxe-cell
      font-size 13px
      text-align center
      .config
        cursor pointer
      .status
        width 10px
        height 10px
  /deep/.vxe-checkbox--unchecked-icon::before
    border 1px solid #b3b3b3 !important
  .edit
    width 33px
    // height: 100%;
    background #69aeff
    position absolute
    top 40px
    text-align center
    .icon
      border-bottom 1px dotted #fff
      margin 0 4px
.page
  margin-top 24px
  height 40px
  /deep/.vxe-pager
    text-align center
  .title
    font-size 12px
    color rgba(0, 0, 0, 0.43)
    display inline-block
    position absolute
    left 50px
    line-height 40px
    z-index 10002
  .vxe-icon--caret-bottom::before
    top 0.6rem
// 新建字段弹窗
.new-field-pup
  position fixed
  top 180px
  left 0
  right 0
  margin auto
  width 306px
  border solid 1px #d0d0d0
  border-radius 4px
  overflow hidden
  z-index 10005
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 20px
    padding-right 2px
    height 36px
    background $auxiliaer-color-6
    color #fff
    font-size 14px
    .rt
      width 23px
      height 23px
      line-height 23px
      text-align center
      cursor pointer
    .rt:hover
      background rgba(200, 5, 5, 1)
  .body
    background #fff
    padding-top 12px
    padding-bottom 20px
    .row
      height 24px
      display flex
      justify-content center
      align-items center
      font-size 12px
      font-weight 700
      color #000
      /deep/.el-input
        width 155px
        height 24px
        line-height 24px
        /deep/.el-input__inner
          border-radius 0
          height 24px
          line-height 24px
    .btn-wrap
      display flex
      justify-content center
      padding-top 20px
      button
        width 79px
        height 24px
        line-height 24px
        font-size 12px
        color #fff
        border none
        outline none
        border-radius 5px
        padding 0
        cursor pointer
      .cancel-btn
        background #bfbfbf
        margin-right 26px
      .confirm-btn
        background #1269ff
.device-list /deep/.vxe-body--column.col-1
  color #0C8B91
  font-weight 700
.device-list /deep/.vxe-body--column.col-2
  color #1573FF
  font-weight 700
.device-list /deep/.vxe-body--column.col-3
  color #A93AAA
  font-weight 700
// 设置弹窗
.set-pup
  position fixed
  left 0
  right 0
  margin 0 auto
  top 100px
  width 885px
  z-index 10005
  border-radius 4px
  overflow hidden
  -moz-box-shadow 0px 0px 4px rgba(0, 0, 0, 0.149019607843137)
  -webkit-box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 20px
    padding-right 2px
    height 36px
    background $auxiliaer-color-6
    color #fff
    font-size 14px
    .lf
      display flex
      align-items center
      .title
        margin-right 28px
      .btn
        width 82px
        height 24px
        text-align center
        line-height 24px
        color #fff
        font-size 12px
        border-radius 2px
        background #1269ff
        margin-right 15px
      .search
        width 202px
        height 25px
        /deep/ .vxe-input--inner
          border solid 1px #797979
          background #555
          color #fff
          border-radius 2px
          outline none
        /deep/ i
          color #797979
    .rt
      width 23px
      height 23px
      line-height 23px
      text-align center
      cursor pointer
    .rt:hover
      background rgba(200, 5, 5, 1)
  .body
    background #fff
    .set-device-list
      padding 10px 22px
      /deep/.vxe-table--header-wrapper
        background #fff
        font-size 13px
        color #000
        font-weight 700
        border 0
        border-bottom 2px solid #69aeff
    .set-device-list .vxe-body--column.col-1
      color #0541C1
.new-pup-wrap
  z-index 10005
  position fixed
  top 100px
  left 0
  right 0
  margin 0 auto
  width 480px
  font-size 12px
  border-radius 4px
  overflow hidden
  -moz-box-shadow 0px 0px 4px rgba(0, 0, 0, 0.149019607843137)
  -webkit-box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  /deep/.el-input__inner::-webkit-input-placeholder
    color #000
    font-size 12px
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 18px
    padding-right 10px
    height 36px
    font-size 14px
    color #fff
    background $auxiliaer-color-6
    .rt
      width 23px
      height 23px
      text-align center
      line-height 23px
      font-size 13px
      cursor pointer
    .rt:hover
      background #c80505
  .body
    background #fff
    padding 0 22px
    .tabs
      display flex
      background #fff
      border-bottom solid 2px #69AEFF
      .item
        width 33.33%
        color #B2B2B2
        font-size 13px
        height 33px
        line-height 33px
        text-align center
        font-weight blod
        cursor pointer
      .item.active
        color #1269FF
    .tabs-cont
      .row:nth-child(2n+1)
        background #F0F2F4
      .row
        display flex
        align-items center
        height 33px
        .lf
          font-size 12px
          color #000
          width 80px
          text-align right
          margin-left 35px
          margin-right 25px
        .rt
          font-size 12px
          text-align left
          /deep/.el-input__inner
            height 25px
            line-height 25px
            width 236px
            border solid 1px #BDBDBD
            border-radius 0
          /deep/.el-input__icon
            line-height 25px
          .add-btn
            margin-left 8px
    .btn-wrap
      background #fff
      padding 0 22px
      text-align center
      .cancel-btn, .confirm-btn
        width 79px
        height 24px
        line-height 24px
        outline none
        border-radius 5px
        color #fff
        font-size 12px
        border none
        margin 30px 0
      .cancel-btn
        background #BFBFBF
        margin-right 28px
      .confirm-btn
        background #1269FF
// 端口信息弹窗
.port-info-pup
  width 911px
  position fixed
  top 215px
  left 0
  right 0
  margin 0 auto
  z-index 10005
  border-radius 4px
  overflow hidden
  background #fff
  -moz-box-shadow 0px 0px 4px rgba(0, 0, 0, 0.149019607843137)
  -webkit-box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 18px
    padding-right 2px
    height 32px
    font-size 14px
    color #fff
    background $auxiliaer-color-6
    .rt
      display flex
      justify-content space-between
      align-items center
      .btn
        width 88px
        height 25px
        line-height 25px
        text-align center
        font-size 12px
        border solid 1px $auxiliaer-color-7
        background $auxiliaer-color-7
        -moz-box-shadow 1px 0px 2px rgba(0, 0, 0, 0.8)
        -webkit-box-shadow 1px 0px 2px rgb(0 0 0 / 80%)
        box-shadow 1px 0px 2px rgb(0 0 0 / 80%)
        cursor pointer
        span
          color #00ffed
          font-size 14px
      .btn:nth-child(1)
        margin-right 10px
      .btn:nth-child(2)
        margin-right 20px
      .btn:hover
        border-color #5D5D5D
        background #191919
      .close-btn
        width 23px
        height 23px
        line-height 23px
        text-align center
        cursor pointer
      .close-btn:hover
        background rgba(200, 5, 5, 1)
  .body
    .port-info
      padding 0 22px
      .status
        width 10px
        height 10px
      .vxe-switch.size--mini
        font-size 8px
      /deep/.vxe-table--header-wrapper
        border-bottom solid 2px #69aeff
      /deep/.vxe-table--body-wrapper
        border-bottom solid 1px #C8C8C8
  .foot
    display flex
    justify-content center
    padding-top 50px
    padding-bottom 25px
    .cancel-btn, .view-btn
      width 119px
      height 30px
      line-height 30px
      text-align center
      border-radius 4px
      border none
      outline none
      color #fff
      font-size 13px
      cursor pointer
    .cancel-btn
      background #c3c3c3
      margin-right 43px
    .view-btn
      background #1890ff
// 配置弹窗
.configuration-pup
  background #fff
  position fixed
  top 200px
  left 0
  right 0
  margin 0 auto
  z-index 10005
  width 386px
  padding 20px 25px
  border solid 8px rgba(170, 170, 170, 0.1)
  border-radius 10px
  .close-btn
    position absolute
    right 8px
    top 0
    cursor pointer
    .svg-icon
      width 12px
      height 12px
  .head
    font-size 13px
    color #000
    font-weight 700
  .body
    margin-top 15px
    width 335px
// 对比
.contrast-pup
  position fixed
  top 200px
  left 0
  right 0
  margin 0 auto
  width 800px
  background #fff
  padding 20px 25px
  border solid 8px rgba(170, 170, 170, 0.1)
  border-radius 10px
  z-index 10005
  .close-btn
    position absolute
    right 8px
    top 0
    cursor pointer
    .svg-icon
      width 12px
      height 12px
  .head
    font-size 13px
    color #000
    font-weight 700
  .body
    margin-top 15px
.pointer
  cursor pointer
</style>
